<!-- 全局指标概览及快速定位控件 -->
<template>
  <div class="sitemap-container">
    <div class="title"><span class="icon icon-daohang"></span>{{ title }}</div>
    <div class="content">
      <van-collapse v-model="activeName">
        <van-collapse-item v-for="(item, index) in data" :key="index" :title="item.title" :name="index" :border="false">
          <div slot="right-icon" class="righttag">{{ activeName.includes(index) ? '- 收起' : '+ 展开' }}</div>
          <template v-if="item.subtargets">
            <div
              v-for="(sub, i) in item.subtargets"
              :key="i"
              class="sub-item"
              @click="handleClick(index, sub.targetId)"
            >
              <div class="sub-title">{{ sub.subtitle }}</div>
              <div class="sub-item-content">
                <div v-for="(t, j) in sub.targets" :key="j">{{ t }}</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="building">
              功能建设中...
            </div>
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: [0, 1],
      title: '长航经验指标体系全景',
      data: [
        {
          title: '预算考核',
          subtargets: [
            {
              subtitle: '核心指标',
              targets: ['保费收入增长率', '新业务价值增长率', '净率润', '营运利润增长率'],
              targetId: 'target_hxzb'
            },
            {
              subtitle: '过程指标',
              targets: [
                '三年投资收益率',
                '三年滚动净值增长率',
                '当年投资收益率',
                '月均绩优人力增长率',
                '累计13率',
                '寿险产保费收入',
                '产销寿新保保费'
              ],
              targetId: 'target_gczb'
            }
          ]
        },
        {
          title: '个险业务',
          subtargets: [
            {
              subtitle: '保费收入',
              targets: ['标准保费', '保费收入', '新保保费', '续期保费'],
              targetId: 'target_bfsr'
            },
            {
              subtitle: '业务品质',
              targets: ['新业务价值率', '13月持续率', '25月持续率', '37月持续率'],
              targetId: 'target_ywpz'
            }
          ]
        },
        {
          title: '个险队伍',
          subtargets: [
            {
              subtitle: '人力KPI',
              targets: ['总人力', '举绩率', '健康人力', '绩优人力', '总主管人力'],
              targetId: 'target_rlkpi'
            },
            {
              subtitle: '人力质量',
              targets: ['人均NBV', '人均标准保费', '人均FYC', '新人产能', '新人活动率', '13月留存率', '25月留存率'],
              targetId: 'target_rlzl'
            }
          ]
        },
        { title: '团险经营' },
        { title: '团险队伍' },
        { title: '运营科技' },
        { title: '共享后援' },
        { title: '费用结构' },
        { title: '财务简报' }
      ]
    }
  },

  computed: {},

  mounted() {},

  methods: {
    handleClick(index, id) {
      this.$emit('navigateto', index, id)
    }
  }
}
</script>
<style lang="scss" scoped>
$bordercolor: #ededed22;
.sitemap-container {
  height: 100%;
  .title {
    font-size: 18px;
    padding: 0 10px;
    font-weight: bold;
    line-height: 50px;
    height: 50px;
    span {
      margin-right: 8px;
    }
  }
  .content {
    padding: 10px 0 30px;
    font-size: 14px;
    height: calc(100% - 50px);
    overflow: auto;
    /deep/.van-collapse {
      &::after {
        border: none;
      }
      .van-collapse-item {
        .van-cell {
          color: #fff;
          font-size: 16px;
        }
        .righttag {
          font-size: 14px;
          color: #eee;
        }
        .van-collapse-item__content {
          background-color: $blue3;
          padding: 0 20px;
          color: #eee;
          .sub-item {
            padding: 14px 0;
            .sub-title {
              display: inline-block;
              border: 1px solid #ededed55;
              border-radius: 4px;
              padding: 2px 20px;
            }
            &:not(:last-child) {
              border-bottom: 1px solid $bordercolor;
            }
            .sub-item-content {
              display: flex;
              flex-wrap: wrap;
              padding: 10px 0 4px 0;
              div {
                width: 50%;
                color: #ddd;
                padding: 2px 0;
                &::before {
                  content: '●';
                  font-weight: bold;
                  margin-right: 4px;
                }
              }
            }
          }

          .building {
            padding: 20px 0;
            color: #999;
          }
        }
      }
      .van-collapse-item:nth-child(odd) {
        .van-cell {
          background-color: #123583;
        }
      }
      .van-collapse-item:nth-child(even) {
        .van-cell {
          background-color: #092d7e;
        }
      }
    }
  }
}
</style>
